<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title>客房情况</title>
    <link href="css/main.css" rel="stylesheet" type="text/css">
    <link href="bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="tabe_div" >
    <p class="p_line text_ient"><a class="find_a">用户名称：</a><input v-model="sreachname" type="text" class="form_input text_ient" placeholder="输入名称"/>
        <a  class="find_a"  >订单状态：</a>
        <el-select style="padding-right: 15px;width: 180px" v-model="orderstatus">
            <el-option key="0" label="待付款" value="0"></el-option>
            <el-option key="1" label="待发货" value="1"></el-option>
            <el-option key="2" label="已发货" value="2"></el-option>
            <el-option key="3" label="已完成" value="3"></el-option>
            <el-option key="4" label="无效订单" value="4"></el-option>
            <el-option key="" label="ALL" value=""></el-option>
        </el-select >
        <el-button type="primary" @click="handleCurrentChange(1)">查询</el-button>
    <p>
    <div>
        <el-table ref="adminTable"
                       :data="page"
                       style="width: 100%;"
                      >
        <el-table-column label="编号" width="100" align="center">
            <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="订单用户名" align="center">
            <template slot-scope="scope">{{scope.row.username}}</template>
        </el-table-column>
        <el-table-column label="配送方式" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.deliveryWay==0">自有物流</span>
                <span v-if="scope.row.deliveryWay==1">顾客自提</span>
            </template>
        </el-table-column>
        <el-table-column label="总金额" width="160" align="center">
                <template slot-scope="scope">{{scope.row.sumCount}}</template>
        </el-table-column>
            <el-table-column label="订单状态" width="160" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.confirmStatus==0">待支付</span>
                    <span v-if="scope.row.confirmStatus==1">待发货</span>
                    <span v-if="scope.row.confirmStatus==2">已发货</span>
                    <span v-if="scope.row.confirmStatus==3">已完成</span>
                    <span v-if="scope.row.confirmStatus==4">无效订单</span>
                </template>
            </el-table-column>
        <el-table-column label="添加时间" width="160" align="center">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="支付时间" width="160" align="center">
                <template slot-scope="scope">{{scope.row.payTime}}</template>
        </el-table-column>
        <el-table-column label="详细" width="160" align="center">
            <template slot-scope="scope">
            <el-button size="mini"
                       type="text"
                       @click="handlegoos(scope.$index, scope.row)">
                查看购物车商品详细
            </el-button>
            <el-button size="mini"
                           type="text"
                           @click="handleaddress(scope.$index, scope.row)">
                查看地址详细
             </el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
                <el-button size="mini"
                           type="text"
                           @click="handleDelete(scope.$index, scope.row)"
                >
                    删除无效订单
                </el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-dialog
                title="地址详细"
                :visible.sync="dialogVisible"
                width="40%" height="200px">
            <el-form :model="address"
                     ref="adminForm"
                     label-width="150px" size="small">
                <el-form-item label="收货人名称：">
                    <el-input disabled="true" v-model="address.name" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="电话：">
                    <el-input disabled="true" v-model="address.phone" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码：">
                    <el-input  disabled="true"v-model="address.postCode"   style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="省/直辖市：">
                    <el-input  disabled="true" v-model="address.provice" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="城市：">
                    <el-input disabled="true" v-model="address.city" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="地区：">
                    <el-input disabled="true" v-model="address.region" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="详细地址：">
                    <el-input  disabled="true" type="textarea" v-model="address.detailAddress"></el-input>
                </el-form-item>
            </el-form>
      </span>
        </el-dialog>
    </div>
</div>
<el-pagination
        background
        style="position: absolute;bottom: 0px"
        @current-change="handleCurrentChange"
        layout="total,prev, pager, next"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        :total="total">
</el-pagination>
</div>
<script>
    var v=new Vue({
        el:"#app",
        data:{
            sreachname:"",
            orderstatus:"",
            pageNum:1,
            pageSize:"5",
            total:"",
            page:[],
            dialogVisible:false,//对话框否显示
            address:{},
        },
        created() {
            this.handleCurrentChange();
        },
        methods:{
            handleCurrentChange(val){
                let params=new URLSearchParams();
                params.append("pageNum",val==null?this.pageNum:val);
                params.append("pageSize",this.pageSize);
                params.append("sreachname",this.sreachname);
                params.append("orderstatus",this.orderstatus);
                axios.post("cs-manage/omsOrder/list",params).then(res=>{
                    this.page=res.data.data.records;
                    this.total=res.data.data.total;
                });
            },
            handleDelete(index, row){
                if (row.confirm_status!=4){
                    this.$message({
                        type: 'info',
                        message: '只能删除无效订单'
                    });
                    return;
                }
                this.$confirm('是否要删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.get("cs-manage/omsOrder/delete/"+row.id).then(res=>{
                        this.$message({
                            message: res.data.message
                        });
                        this.handleCurrentChange(1);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                    row.status=!row.status;
                });
            },
            handleaddress(index, row){
                this.dialogVisible=true;
                axios.get("cs-manage/omsOrder/getaddress/"+row.adressId).then(res=>{
                    this.address=res.data.data;
                })
            },
            handlegoos(index, row){
                location.href="CarGoods.html?id="+row.id;
            }
        }
    })
</script>
</body>
</html>
